<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
			
	<style type="text/css">
		.col {
			width:50%;
			padding:10px;
		}
	</style>			
			
	<rich:separator height="1" style="10px 0"/> 
			
	<h:panelGrid columns="2" width="100%" columnClasses="col">

			<h:panelGroup>
				This code does not work as expected. The expected echo text does not appear
				below even the condition for <code>'renderer'</code> returns <code>true</code>.
				Also, the error message does not appear when the length of the text reaches the limit.
			</h:panelGroup>

			<h:panelGroup>
				This code works properly. The <code>h:message</code> is marked for update during
				each Ajaxrequest/response. The place for bottom label is reserved with
				<code>outputPanel</code> while 	the component is not rendered.
			</h:panelGroup>

			<a4j:outputPanel layout="block">

				<h:message for="text1" style="color:red" />
			
				<a4j:outputPanel layout="block">
					<h:form>
						<h:outputText value="Enter Text:"/>
						<h:inputText id="text1" label="text1" value="#{rsBean.text1}">
							<f:validateLength maximum="10"/>
							<a4j:support event="onkeyup" reRender="out1" />
						</h:inputText>
					</h:form>
				</a4j:outputPanel>
				
				<h:outputText id="out1" rendered="#{not empty rsBean.text1}" value="Approved Text: #{rsBean.text2}" />

			</a4j:outputPanel>


			
			<a4j:outputPanel layout="block">

				<a4j:outputPanel ajaxRendered="true">
					<h:message for="text2" style="color:red" />
				</a4j:outputPanel>
			
				<a4j:outputPanel layout="block">
					<h:form>
						<h:outputText value="Enter Text:"/>
						<h:inputText id="text2" label="text1" value="#{rsBean.text2}">
							<f:validateLength maximum="10"/>
							<a4j:support event="onkeyup" reRender="out2" />
						</h:inputText>
					</h:form>
				</a4j:outputPanel>
				
				<a4j:outputPanel layout="none">
					<h:outputText id="out2" rendered="#{not empty rsBean.text2}" value="Approved Text: #{rsBean.text2}" />
				</a4j:outputPanel>
			</a4j:outputPanel>
	</h:panelGrid>
	
	<rich:separator height="1" style="10px 0"/> 
	
</ui:composition>